<!-- 修改部门 -->
<template>
  <div class="modify-department-dialog">
    <el-dialog
      width="800px"
      class=""
      top="6vh"
      title="修改部门"
      :visible="$store.state.dialog.modifyDepartment"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="jobForm" :rules="rules" ref="jobForm" label-width="100px" size="mini">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="部门名称" prop="jobName">
                    <el-input v-model="jobForm.jobName" auto-complete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="权限" prop="role">
                    <el-select v-if="qjrole === '0'" placeholder="请选择权限" v-model="jobForm.role">
                      <el-option label="超级管理员" value="0"></el-option>
                      <el-option label="企业管理员" value="1"></el-option>
                      <el-option label="个人用户" value="2"></el-option>
                    </el-select>
                    <el-select v-else-if="qjrole === '1'" placeholder="请选择权限" v-model="jobForm.role">
                      <el-option label="企业管理员" value="1"></el-option>
                      <el-option label="个人用户" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="23">
                  <el-form-item label="描述" prop="describe">
                    <el-input type="textarea" v-model="jobForm.describe"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="21">
                  <el-form-item label="费用权限">
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox label="1">总费用</el-checkbox>
                      <el-checkbox label="2">船代费用</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-tree
          :data="jobinfo"
          ref="rootTree"
          show-checkbox
          node-key="id"
          :default-checked-keys="editChosen"
          @check="getKeys"
          :props="defaultProps">
        </el-tree>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureDepartment('jobForm')" size="mini">发 布</el-button>
        <el-button type="info" @click="close" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updJob } from '../api/userman'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      mayArr: [],
      jobForm: {},
      rules: {
        jobName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择权限', trigger: 'blur' }
        ]
      },
      checkList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  props: {
    modifydate: {
      type: String,
      default: () => {
        return {}
      }
    },
    jobinfo: {
      type: Array,
      default: () => {
        return []
      }
    },
    editChosen: {
      type: Array,
      default: () => {
        return []
      }
    },
    myFeerole: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  computed: {
    ...mapState({
      qjrole: state => state.user.qjrole
    })
  },
  watch: {
    '$store.state.dialog.modifyDepartment' (value) {
      if (value) {
        this.jobForm = JSON.parse(this.modifydate)
        if (this.myFeerole === 0) {
          this.checkList = ['1', '2']
        }
        if (this.myFeerole === 1) {
          this.checkList = ['1']
        }
        if (this.myFeerole === 2) {
          this.checkList = ['2']
        }
        if (this.myFeerole === 3) {
          this.checkList = []
        }
      }
    }
  },
  methods: {
    // 修改
    async editDepartment () {
      if (this.mayArr.length === 0) {
        this.getKeys()
      }
      let myrole = ''
      let lg = this.checkList.length
      if (lg === 2) {
        myrole = 0
      }
      if (lg === 1) {
        myrole = this.checkList[0]
      }
      if (lg === 0) {
        myrole = 3
      }
      const res = await updJob({
        jobName: this.jobForm.jobName,
        describe: this.jobForm.describe,
        menuId: this.mayArr,
        role: this.jobForm.role,
        feeRole: myrole,
        jobId: this.jobForm.jobId
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.$parent.getDepartmentList(1, 10)
        this.$store.commit('hide_modify_department_dialog')
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 确认修改
    sureDepartment (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editDepartment()
        } else {
          return false
        }
      })
    },
    getKeys () {
      this.mayArr = []
      let chosen = this.$refs.rootTree.getCheckedNodes()
      chosen.map(item => {
        this.mayArr.push(item.id)
      })
      console.log(this.mayArr)
    },
    close () {
      this.$store.commit('hide_modify_department_dialog')
    }
  }
}
</script>

<style scoped lang="less">

</style>
